<template>
	<div class="new">
		<maining :tablist="tablist" :showi="showi" @ontab="ontab" title="新闻动态">
			<template v-slot:title>
				<div v-show="!showdel" class="is-wb is-tc is-m-b3" style="padding: 45px 15px 0 15px; box-sizing: border-box;">
					<div style="margin-bottom: 10px;" :style="{'font-size':showMobile?'18px':'30px'}">
						{{delList.title}}
					</div>
				</div>
			</template>
			<template v-slot:main>
				<div v-show="showi==0&&showdel" class="" style="padding: 20px 20px;">
					<div v-if="showMobile" style="width: 100%;text-align: center;margin-bottom: 20px;font-size: 22px;font-weight: 600;">新闻动态</div>
					<div class="card flex-r is-cur" v-for="(item,index) in newList" :key="index"
						@click="onpath(index,item)">
						<div class="boring-tb"></div>
						<div class="boring-tr"></div>
						<div class="boring-bl"></div>
						<div class="boring-bt"></div>
						<div  class="" style="width: 180px;height: 150px;margin-right: 15px;">
							<img class="is-wb is-hb" :src="item.image" alt="">
						</div>
						<div class="flex1">
							<div :class="showMobile?'fonting':''" style="color: #666;margin-top: 10px;">
								{{item.title}}
							</div>
							<div v-if="!showMobile"  style="color: #888;margin-top: 5px;">
								<span style="font-size: 26px;margin-right: 5px;">{{item.create_time}}</span>
							</div>
							<div class="is-f-12" style="color: #999;margin-top: 5px;">
								　<div class="htmling" v-html="item.abstract"></div>
							</div>
						</div>
					</div>
				</div>
				<div v-show="!showdel" style="padding: 30px 30px;">
					<div v-html="delList.content"></div>
				</div>

			</template>
		</maining>
	</div>
</template>

<script lang="ts" setup>
	import maining from '@/components/main.vue'
	import { service } from '@/request/http'
	import useAppStore from '@/store/modules/home'
	import { storeToRefs } from 'pinia'
	import { isMobile } from '@/utils/index'
	const {
		newList
	} = defineProps({
		newList: { // 新闻
			type: Array,
			default: () => {
				return []
			}
		},

	})

	const store = storeToRefs(useAppStore())
	const newid = store.newid
	const delList = ref({})
	const ondel = (id : any) => {
		service.get('/api/article/detail?id=' + id).then(res => {
			// console.log('新闻详情-------0', res.data)
			delList.value = res.data
		})
	}
	const showMobile = ref(null)
	
	onMounted(() => {
		showMobile.value = isMobile() //true 移动端 false pc
		if(newid.value){
			ondel(newid.value)
		}

	})
	const showdel = store.showdel
	const showindex = ref(0)
	const onpath = (i : any, val : any) => {
		useAppStore().onshowdel(false)
		showindex.value = i
		ondel(val.id)
	}
	const tablist = ref([])
	const showi = ref(0)
	const ontab = (i : any) => {
		showi.value = i
	}
</script>

<style lang="scss" scoped>
	.new {
		.fonting{
			overflow : hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 7;

		}
		.htmling {
			height: 32px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.text {
			line-height: 22px;
			font-size: 12px;
			white-space: pre-wrap;
			white-space: -moz-pre-wrap;
			white-space: -pre-wrap;
			white-space: -o-pre-wrap;
			*word-wrap: break-word;
			*white-space: normal;
			color: #333;
		}

		.card {
			width: 100%;
			height: 194px;
			border: 2px solid #e7e7e7;
			margin-bottom: 20px;
			padding: 25px 22px 0 22px;
			box-sizing: border-box;

			position: relative;

			.boring-tb {
				position: absolute;
				top: -2px;
				left: -2px;
				width: 2px;
				height: 0;
				background-color: #0244D6;
			}

			.boring-tr {
				position: absolute;
				top: -2px;
				left: 0;
				width: 0px;
				height: 2px;
				background-color: #0244D6;
			}

			.boring-bl {
				position: absolute;
				right: -2px;
				width: 0px;
				height: 2px;
				bottom: -2px;
				background-color: #0244D6;
			}

			.boring-bt {
				position: absolute;
				right: -2px;
				width: 2px;
				height: 0px;
				bottom: 0;
				background-color: #0244D6;
			}

			&:hover {
				.boring-tb {
					height: calc(100% + 4px);
					transition: 500ms;
				}

				.boring-tr {
					transition: 500ms;
					width: 100%;
				}

				.boring-bl {
					width: calc(100% + 4px);
					transition: 500ms;
				}

				.boring-bt {
					height: calc(100% + 2px);
					transition: 500ms;
				}

			}
		}
	}
</style>